import React from 'react';
import { Avatar, Breadcrumb, Dropdown, Space, Layout, Menu, message } from "antd";
import { Link, useNavigate } from "react-router-dom";
import { HomeOutlined, SmileOutlined } from "@ant-design/icons";
// 1-引入异步action
import { postLogoutAsync, useSelectorAuth } from "@/store/slice/auth";
import { useAppDispatch } from "@/hooks";

const { Header } = Layout;


function IndexHeader() {
    const auth = useSelectorAuth();
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const menu = (

        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <Link to={"/"}>
                            返回首页
                        </Link>
                    ),
                    icon: <HomeOutlined />,
                },
                {
                    key: '2',
                    label: (
                        <a onClick={async e => {
                            e.preventDefault();
                            await dispatch(postLogoutAsync());
                            message.success("退出成功");
                            navigate('/login');
                        }}
                        >
                            退出登陆
                        </a>
                    ),
                    icon: <SmileOutlined />,
                }
            ]}
        />
    );
    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>

            <Space>
                <span>欢迎回来{auth.info.name}!</span>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Avatar src={auth.info.avatar} />
                    </a>
                </Dropdown>
            </Space>

        </Header>
    );
}

export default IndexHeader;